<template>
<div class="system-user">
  <search-box>
      <div class="other-control" slot="other" v-if="!relative.id">
          <el-button type="primary" @click="addUser"><i class="el-icon-circle-plus-outline"></i> 新增</el-button>
          <img src="" alt="" class="control-icon">
            <el-popover
            placement="bottom"
            width="84"
            trigger="hover"
            v-model="visible2">
            <div class="choice-type-box">
                <template v-for="item in typeArray" >
                    <div :key="item.id" class="type-item" :class="{'active': downType == item.id}" @click="selectType(item)">{{item.name}}</div>
                </template>
            </div>
            <img src="" alt="" class="control-icon" slot="reference">
            </el-popover>
      </div>
  </search-box>
   <table-list :tableData="tableData" @changeUser="changeUser" @changeAuthorization="changeAuthorization"></table-list>
   <div class="box-pagenation">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
  </div>
  <manage-dialog :outerVisible="showManagement" :types="types"  @hideManagementDialog="showManagement = false"></manage-dialog>
  <role-auth-dialog @closeAuthorization="showAuthorization = false" :showDialog="showAuthorization" ></role-auth-dialog>
</div>
</template>

<script>
import SearchBox from './SearchBox'
import tableList from './TableList'
import manageDialog from './ManageDialog'
import roleAuthDialog from './RoleAuthDialog'
export default {
    name: 'User',
    components: {
        SearchBox,
        tableList,
        manageDialog,
        roleAuthDialog
    },
    props: {
        relative: {
            type: Object,
            default () {
                return {}
            }
        }
    },
    data () {
        return {
            typeArray: [
                {
                    name: 'Excel(xlsx)',
                    id: 1
                },
                {
                    name: 'CSV(csv)',
                    id: 2
                }
            ],
            downType: 1,
            visible2: false,
            tableData: [
                {
                    id: 1
                }
            ],
            currentPage: 1,
            pageSize: 10,
            total: 10,
            types: 1,
            showManagement: false,
            showAuthorization: false
        }
    },
    methods: {
        selectType (item) {
            this.downType = item.id
        },
        handleCurrentChange (val) {
            this.currentPage = val
            this.$emit('flash')
        },
        handleSizeChange (val) {
            this.pageSize = val
            this.$emit('flash')
        },
        addUser () {
            this.types = 1
            this.showManagement = true
        },
        changeUser (item) {
            this.types = 0
            this.showManagement = true
        },
        changeAuthorization (item) {
            this.showAuthorization = true
        }
    }
}
</script>

<style lang="less">
.system-user {
    background: #fff;
    .other-control {
        display: inline-block;
        margin-left: 10px;
        .control-icon {
            display: inline-block;
            width: 30px;
            height: 30px;
            background: #f00;
            vertical-align: middle;
            margin-left: 10px;
        }
    }
}
 .choice-type-box {
            text-align: center;
            .type-item {
                text-align: center;
                height: 30px;
                line-height: 30px;
                cursor: pointer;
                &.active {
                    background: #3a8ee6;
                    color: #fff !important;
                }
            }
}
</style>
